<template>
	<view class="voice-line-wrap" :style="{
	  '--line-height': '15px',
	  '--line-start-color': `${color}`,
	  '--line-end-color':  `${color}`,
	}">
		<div class="voice-line one"></div>
        <div class="voice-line two"></div>
        <div class="voice-line three"></div>
        <div class="voice-line four"></div>
        <div class="voice-line five"></div>
        <div class="voice-line six"></div>
        <div class="voice-line seven"></div>
        <div class="voice-line six"></div>
        <div class="voice-line five"></div>
        <div class="voice-line four"></div>
        <div class="voice-line three"></div>
        <div class="voice-line two"></div>
        <div class="voice-line one"></div>
	</view>
</template>

<script lang="ts" setup>
	defineProps({
		color:{
			type:String
		},
	})
</script>

<style lang="scss" scoped>
	.voice-line-wrap {
		display: flex;
		align-items: center;
	
		.voice-line {
			width: 2px;
			height: var(--line-height);
			border-radius: 2px;
			margin: 0 2px;
		}
	
		.one {
			animation: wave 0.4s 1s linear infinite alternate;
		}
	
		.two {
			animation: wave 0.4s 0.9s linear infinite alternate;
		}
	
		.three {
			animation: wave 0.4s 0.8s linear infinite alternate;
		}
	
		.four {
			animation: wave 0.4s 0.7s linear infinite alternate;
		}
	
		.five {
			animation: wave 0.4s 0.6s linear infinite alternate;
		}
	
		.six {
			animation: wave 0.4s 0.5s linear infinite alternate;
		}
	
		.seven {
			animation: wave 0.4s linear infinite alternate;
		}
	}
	
	@keyframes wave {
		0% {
			transform: scale(1, 1);
			background-color: var(--line-start-color);
		}
	
		100% {
			transform: scale(1, 0.2);
			background-color: var(--line-start-color);
		}
	}
</style>